<template>
  <!-- 用户中心的左边抽屉的菜单 -->
  <el-aside class="ba-user-layouts">
    <!-- 用户信息 -->
    <div class="userinfo">
      <!-- logo头像 -->
      <div @click="routerPush('account/profile')" class="user-avatar-box">
        <img class="user-avatar" :src="avatarUrl" alt="" />
      </div>
      <!-- 用户名 -->
      <p class="username">{{ userInfo.userName }}</p>
    </div>
    <!-- 用户中心菜单 -->
    <!-- <div class="user-menus">
      <template v-for="(item, idx) in memberCenter.state.viewRoutes" :key="idx">
        <div v-if="memberCenter.state.showHeadline" class="user-menu-max-title">
          {{ item.meta?.title }}
        </div>
        <div v-for="(menu, index) in item.children" :key="index" @click="routerPush('', menu)" class="user-menu-item"
          :class="
            memberCenter.state.activeRoute?.name == menu.name ? 'active' : ''
          ">
          <Edit class="icon" style="width: 1.3em; height: 1.3em; margin-right: 8px"
            color="var(--el-text-color-secondary)" />
          <span>{{ menu.meta?.title }}</span>
        </div>
      </template>
    </div> -->
    <div class="user-menus">
      <div
        v-for="(item, idx) in userCenterBaseRoute.children"
        :key="idx"
        @click="routerPush('', item)"
        class="user-menu-item"
        :class="
          memberCenter.state.activeRoute?.name == item.name ? 'active' : ''
        "
      >
        <div v-if="item.meta?.title !== 'Loading'">
          <Edit
            class="icon"
            style="width: 1.3em; height: 1.3em; margin-right: 8px"
            color="var(--el-text-color-secondary)"
          />
          <span>{{ item.meta?.title }}</span>
        </div>
      </div>
      <!-- </template> -->
    </div>
  </el-aside>
</template>
<script lang="ts" setup>
import { onMounted, toRaw, reactive, ref } from "vue";
import {
  useRoute,
  useRouter,
  RouteRecordRaw,
  onBeforeRouteUpdate,
} from "vue-router";
import useCurrentInstance from "@/utils/useCurrentInstance";
//获取用户信息的仓库
import { useUserInfo } from "@/store/userInfo";
//引入用户中心功能自定义仓库
import { useMemberCenter } from "@/store/memberCenter";
import { clickMenu } from "@/utils/router";
import { userCenterBaseRoute } from "@/router/static"; //引入router
import { useConfig } from "@/store/config";

//当前页面有变化时触发（整个页面的部分更新）
onBeforeRouteUpdate((to) => {
  memberCenter.setActiveRoute(to);
});

const route = useRoute();
const router = useRouter();
const userInfo = useUserInfo();
const memberCenter = useMemberCenter();
const { proxy } = useCurrentInstance(); //mitt 全局事件总线
const config = useConfig();

const avatarUrl = ref("");

onMounted(() => {
  console.log("userInfo", userInfo.$state.avatar);
  avatarUrl.value = "http://119.45.21.146:8080" + userInfo.$state.avatar;
});
//页面路由跳转
const routerPush = (routeName = "", route?: RouteRecordRaw) => {
  if (document.body.clientWidth < 992) {
    memberCenter.toggleMenuExpand(false);
  }
  if (routeName) {
    router.push({ name: routeName });
  } else if (route) {
    //除了跳转路由之外 当导航错误发生时会有提示
    clickMenu(route);
  }
};
</script>
<style lang="scss" scoped>
.ba-user-layouts {
  width: 240px;
  // background-color: #ffffff;
  background-color: v-bind('config.getColorVal("menuBackground")');
  box-shadow: var(--el-box-shadow-light);

  .userinfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px 0;

    .user-avatar-box {
      position: relative;
      cursor: pointer;
    }

    // 用户默认logo头像
    .user-avatar {
      display: block;
      width: 100px;
      border-radius: 50%;
    }

    // 用户名
    .username {
      display: block;
      text-align: center;
      width: 100%;
      padding: 10px 0;
      font-size: var(--el-font-size-large);
      font-weight: bold;
    }
  }

  .user-menus {
    font-size: var(--el-font-size-base);
    color: var(--el-text-color-regular);
    padding-bottom: 20px;

    .user-menu-max-title {
      font-size: 15px;
      color: var(--el-text-color-secondary);
      padding: 5px 30px;
    }

    .user-menu-item {
      padding: 10px 30px;
      cursor: pointer;

      // &:hover {
      //   border-left: 2px solid rgb(124, 88, 41);
      //   padding-left: 28px;
      //   color: rgb(124, 88, 41);
      //   background-color: rgba(255, 255, 0, 0.266);

      //   .icon {
      //     color: rgb(124, 88, 41);
      //   }
      // }
    }

    .user-menu-item.active {
      // border-left: 2px solid rgb(124, 88, 41);
      padding-left: 28px;
      color: v-bind('config.getColorVal("menuActiveColor")');
      background-color: v-bind('config.getColorVal("menuActiveBackground")');

      .icon {
        color: v-bind('config.getColorVal("menuActiveColor")');
      }
    }
  }
}

// .user-menu-item:hover,
// .user-menu-item.active {
//     border-left: 2px solid var(--el-color-primary);
//     padding-left: 28px;
//     color: var(--el-color-primary);

//     // .icon {
//     //     color: var(--el-color-primary) !important;
//     // }

//     background-color: var(--el-color-info-light-8);
// }

@media screen and (max-width: 991px) {
  .ba-user-layouts {
    width: 100%;
    background-color: var(--ba-bg-color-overlay);
    box-shadow: none;
  }
}
</style>
